<template>
  <div class="content">
    <!-- form表单部分 -->
    <el-card shadow="always">
      <el-row :gutter="8">
        <el-form :inline="true" :model="formData" label-width="80px" size="medium">
          <el-col :span="8">
            <el-col :span="24">
              <el-form-item label="司机账号">
                <el-input v-model="formData.account" placeholder="请输入司机账号" />
              </el-form-item>
            </el-col>
            <el-form-item label="所属机构">
              <el-select ref="selectTree" v-model="formData.agencyId" placeholder="请选择机构" clearable @clear="handleClear">
                <!-- v-if切换显示树形 true显示，false隐藏 -->
                <el-option hidden :value="formData.agencyId" :label="formData.agencyName" />
                <!-- expand-on-click-node默认为true，点击节点文字也能打开下拉框子项，false只能点击箭头才能打开。:check-on-click-node默认为false，点击节点前的复选框才能选中，为true则点击节点就能选中。 -->
                <el-tree accordion :data="agency" :props="{label:'name'}" :expand-on-click-node="false" :check-on-click-node="true" @node-click="handleNodeClick" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-col :span="24">
              <el-form-item label="司机姓名">
                <el-input v-model="formData.name" placeholder="请输入司机姓名" />
              </el-form-item>
            </el-col>
            <el-form-item style="padding-left:10px">
              <el-button type="danger" @click="onQuery">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-col :span="24">
              <el-form-item label="司机手机号" label-width="100px">
                <el-input v-model="formData.phone" placeholder="请输入司机手机号" />
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <!-- 列表显示部分 -->
    <el-card class="list">
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="index"
          label="序号"
        />
        <el-table-column
          prop="account"
          label="司机账号"
        />
        <el-table-column
          prop="name"
          label="司机姓名"
        />
        <el-table-column
          prop="mobile"
          label="司机电话"
        />
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
        >
          <!-- <template v-slot="scope">
              {{ scope.row.userType }}
            </template> -->
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          :formatter="formatWorkeStatus"
        />
        <el-table-column
          label="操作"
          fixed="right"
          prop=""
        >
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-button type="text" size="small" @click="$router.push(`/employee/driver-detail/${scope.row.userId}&formUrlName=司机管理`)">查看</el-button>
            <el-button type="text" size="small" class="red" @click="ConfigCarDialog">配置车辆</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <!-- <span class="demonstration">调整每页显示条数</span> -->
        <el-pagination
          :current-page.sync="pageConfig.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 车辆配置弹框 1-->
    <el-dialog
      title="车辆配置"
      :visible="showConfigCarDialog"
      width="40%"
      @close="CloseDialog"
    >
      <span>配置车辆需满足一下条件</span>
      <div class="second">
        <span class="before">1.司机信息已完善</span>
        <span>2.司机已设置排班</span>
      </div>
      <div class="second">
        <span>3.司机绑定车辆未在启用状态</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialog">取 消</el-button>
        <el-button type="danger" @click="showConfigCarDialog2=true">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置车辆弹框2 -->
    <config-car-2 :show-config-car-dialog2="showConfigCarDialog2" />
  </div>
</template>

<script>
import EmployeeEnum from '@/constant/employee'
import { getDriverPage } from '@/api/empolyee/driver'
import { getBussinessTree } from '@/api/empolyee/scheduling'
import configCar2 from './configCar2.vue'
export default {
  components: { configCar2 },
  data() {
    return {
      formData: {
        account: '', // 司机账号
        agencyId: '', // 所属机构
        agencyName: '', // 所属机构名称
        name: '', // 司机姓名
        phone: ''// 司机手机号
      },
      tableData: [],
      // 下拉框树形数据
      agency: [],
      pageConfig: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      showConfigCarDialog: false,
      showConfigCarDialog2: false
    }
  },
  created() {
    this.driverPage()
    // 获取树形结构下拉框
    this.getBussinessTree()
  },
  methods: {
    async   getBussinessTree() {
      let { data } = await getBussinessTree()
      if (data.data) {
        data = data.data
      }
      const tree = JSON.parse(data)
      console.log(188, tree)
      this.agency = tree
    },
    // 机构选中后的操作
    handleNodeClick(data) {
    //   console.log(96, data)可以获取到被点击的部门对象，包含部门名称name
    // 赋值给formdata
      this.formData.agencyId = data.id
      this.formData.agencyName = data.name
      console.log(this.$refs.selectTree)
      //  调用选择器的失去焦点方法实现隐藏效果
      this.$refs.selectTree.blur()
    },
    // 用户点击清空按钮时触发，清空数据
    handleClear() {
      this.formData.agencyId = ''
      this.formData.agencyName = ''
    },
    async driverPage() {
      const res = await getDriverPage({ ...this.pageConfig, ...this.formData })
      // console.log(res)
      // this.tableData = res.data.data.items
      if (res.data.items) {
        // 处理序号，让每个员工都自带序号。
        this.tableData = res.data.items.map((item, index) => {
        // console.log(79,index)
          return {
            ...item, // 员工本来的数据
            index: (this.pageConfig.page - 1) * this.pageConfig.pageSize + index + 1
          }
        })
      } else {
        this.tableData = []
      }

      this.total = +res.data.counts
    },
    // 格式化员工角色
    formatWorkeStatus(row, col, val) {
      const res = EmployeeEnum.workStatus.find(item => item.id === val)
      return res ? res.value : '未知'
    },
    //
    handleSelectionChange(val) {
      console.log(207, val)
      this.multipleSelection = val
    },
    // 页容量改变触发的函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageConfig.pageSize = val
      this.driverPage()
    },
    // 当前页改变触发的函数。
    handleCurrentChange(newpage) {
      // console.log(`当前页: ${val}`)
      this.pageConfig.page = newpage
      this.driverPage()
    },

    // 查询
    onQuery() {
      this.driverPage()
    },
    // 重置
    reset() {
      this.formData = {
        account: '', // 司机账号
        agencyId: '', // 所属机构
        agencyName: '', // 所属机构名称
        name: '', // 司机姓名
        phone: ''// 司机手机号
      }
      // 更新页面
      this.driverPage()
    },
    // 查看司机详情
    async   handleClick(id) {

    },
    // 点击配置车辆
    ConfigCarDialog() {
      this.showConfigCarDialog = true
    },
    // 关闭配置车辆弹框
    CloseDialog() {
      this.showConfigCarDialog = false
    }
  }
}
</script>

<style>
.content{
  margin: 20px;
}
.block{
  display: flex;
  justify-content: center;
}
.before{
  padding-right: 50px;
}
.second{
  margin-top: 20px;
}

</style>
